<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ include file="../session.jsp"%>
<!DOCTYPE html>
<html lang="ko">
  <head>
  	<%@ include file="../head.jsp"%>${alert}
  	<style>
  		.box {
  			width: 50%; height: 50%;
  		}
  		.input-group-addon {
  			background-color: #ffffff;
  			border: 0px;
  		}
  	</style>
  </head>
  <body>
  	<%@ include file="../menu.jsp"%>
	<div class="container">
		<div class="page-header clearfix">
			<h2 class="pull-left">회원 검색</h2>
			<div class="pull-right" style="padding-top: 30px">
				<a href="#" id="opensearch" class="btn btn-info">검색조건 펼치기/접기</a>
			</div>
		</div>
		
		<div id="searchdiv">
			<form id="searchRegister" class="form-horizontal" role="form" method="post" action="listRegister.do">
				<fieldset>
					<div class="clearfix">
					
						<div class="box pull-left">
							<div class="form-group">
								<label for="nickName" class="col-md-2 control-label">닉네임</label>
								<div class="col-md-9">
									<input type="text" class="form-control" name="nickName"/>
								</div>
							</div>
							
							<div class="form-group">
								<label for="gender" class="col-md-2 control-label">성별</label>
								<div class="col-md-9">
									<label class="radio-inline"><input type="radio" name="gender" value="6"> 남자</label>
									<label class="radio-inline"><input type="radio" name="gender" value="7"> 여자</label>
								</div>
							</div>
							
							<div class="form-group">
								<label for="birthYear1" class="col-md-2 control-label">출생년도</label>
								<div class="col-md-9 input-group input-group-sm">
									<select class="form-control" name="birthYear1">
										<option>--- 시작년도 ---</option>
										<c:forEach items="${birthYear}" var="birthYear">
											<option value="${birthYear.idCommon}">${birthYear.idCommon}년</option>
										</c:forEach>
									</select><span class="input-group-addon">~</span>
									<select class="form-control" name="birthYear2">
										<option>--- 끝년도 ---</option>
										<c:forEach items="${birthYear}" var="birthYear">
											<option value="${birthYear.idCommon}">${birthYear.idCommon}년</option>
										</c:forEach>
									</select>
								</div>
							</div>
							
							<div class="form-group">
								<label for="created_date1" class="col-md-2 control-label">가입일</label>
								<div class="col-md-9 input-group input-group-sm">
									<input type="date" class="form-control" name="created_date1">
									<span class="input-group-addon">~</span>
									<input type="date" class="form-control" name="created_date2">
								</div>
							</div>
						</div>
						
						<div class="box pull-right">
							<div class="form-group">
								<label for="eMail" class="col-md-2 control-label">이메일주소</label>
								<div class="col-md-9">
									<input type="text" class="form-control" name="eMail">
								</div>
							</div>
							
							<div class="form-group">
								<label for="skinType" class="col-md-2 control-label">피부타입</label>
								<div class="col-md-9">
									<select class="form-control" name="skinType">
										<option>--- 선택하세요 ---</option>
										<c:forEach items="${skinType}" var="skinType">
											<option value="${skinType.idCommon}">${skinType.commonText}</option>
										</c:forEach>
									</select>
								</div>
							</div>
							
							<div class="form-group">
								<label for="location1" class="col-md-2 control-label">거주지역</label>
								<div class="col-md-9">
									<div class="row">
										<div class="col-md-6">
											<select class="form-control" name="location1">
												<option value="default">--- 시/도 ---</option>
												<c:forEach items="${sido}" var="sido">
													<option value="${sido.idCommon}">${sido.commonText}</option>
												</c:forEach>
											</select>
										</div>
										<div class="col-md-6">
											<select class="form-control" name="location2">
												<option value="default">시/도를 선택하세요</option>
											</select>
										</div>
									</div>
								</div>
							</div>
							
							<div class="form-group">
								<label for="recommendNickname" class="col-md-2 control-label">추천 닉네임</label>
								<div class="col-md-9">
									<input type="text" class="form-control" name="recommendNickname">
								</div>
							</div>
							
						</div>
						
						<div class="form-group">
							<div class="col-md-offset-2 col-md-8">
								<div class="row">
									<div class="col-md-6">
										<button type="submit" class="btn btn-primary btn-block">검색하기</button>
									</div>
									<div class="col-md-6">
										<button type="reset" class="btn btn-warning btn-block">다시작성</button>
									</div>
								</div>
							</div>
						</div>
						
					</div>
				</fieldset>
			</form>
			<hr/>
		</div>
		
		<span class="pull-left" style="margin-bottom:10px;">
			등록 : ${page.totalArticleCount}건 / 활성 : ${activity}건 / 비활성 : ${unActivity}건
		</span>
		<div class="table-responsive">
			<table class="table table-striped table-hover">
				<thead>
					<tr class="warning row">
						<th class="text-center col-md-1">회원번호</th>
						<th class="text-center col-md-3">닉네임</th>
						<th class="text-center col-md-3">이메일주소</th>
						<th class="text-center col-md-2">가입일</th>
						<th class="text-center col-md-1">성별</th>
						<th class="text-center col-md-2">
							<c:choose>
								<c:when test="${sort eq 'isActivity'}">
									<a href="listRegister.do?order=isUnActivity${where}">활동여부 ▲</a>
								</c:when>
								<c:otherwise>
									<a href="listRegister.do?order=isActivity${where}">활동여부 ▼</a>
								</c:otherwise>
							</c:choose>
						</th>
					</tr>
				</thead>
				<tbody>
					<c:forEach items="${register}" var="list">
						<tr class="text-center row">
							<td class="col-md-1">${list.idRegister}</td>
							<td class="col-md-3"><a href="updateRegister.do?id=${list.idRegister}">${list.nickName}</a></td>
							<td class="col-md-3">${list.eMail}</td>
							<td class="col-md-2">${fn:substring(list.create_date, 0, 4)}-${fn:substring(list.create_date, 4, 6)}-${fn:substring(list.create_date, 6, 8)}</td>
							<td class="col-md-1">
								<c:if test="${list.gender == 6}">남</c:if>
								<c:if test="${list.gender == 7}">여</c:if>
							</td>
							<c:choose>
								<c:when test="${list.isActivity == 1}">
									<td class="col-md-2">Y
										<a href="listRegister.do?page=${page.nowPage}&id=${list.idRegister}&isActivity=${list.isActivity}${where}${order}">
											<button type="button" class="btn btn-xs btn-defalut unActivity">탈퇴</button>
										</a>
									</td>
								</c:when>
								<c:otherwise>
									<td class="col-md-2">N
										<a href="listRegister.do?page=${page.nowPage}&id=${list.idRegister}&isActivity=${list.isActivity}${where}${order}">
											<button type="button" class="btn btn-xs btn-primary Activity">승인</button>
										</a>
									</td>
								</c:otherwise>
							</c:choose>
						</tr>
					</c:forEach>
				</tbody>
			</table>
		</div>
		
		<div class="text-center">
			<ul class="pagination">

				<!-- 이전 그룹 -->
				<c:choose>
					<c:when test="${page.startPage > page.pageGroupCount}">
						<li><a href="listRegister.do?page=${page.startPage-1}${where}${order}">&laquo;</a></li>
					</c:when>
					<c:otherwise>
						<li class="disabled"><a href="#">&laquo;</a></li>
					</c:otherwise>
				</c:choose>
				
				<!-- 페이지 번호 -->
				<c:forEach begin="${page.startPage}" end="${page.endPage}" step="1" var="now">
					<c:choose>
						<c:when test="${page.nowPage == now}">
							<li class="active"><a href="#">${now}</a></li>
						</c:when>
						<c:otherwise>
							<li><a href="listRegister.do?page=${now}${where}${order}">${now}</a></li>
						</c:otherwise>
					</c:choose>
				</c:forEach>

				<!-- 다음 그룹 -->
				<c:choose>
					<c:when test="${page.endPage < page.lastGroupFirstPage}">
						<li><a href="listRegister.do?page=${page.endPage+1}${where}${order}">&raquo;</a></li>
					</c:when>
					<c:otherwise>
						<li class="disabled"><a href="#">&raquo;</a></li>
					</c:otherwise>
				</c:choose>

			</ul>
		</div>

	</div>
	<!-- Javascript -->
	<script src="assets/js/jquery.js"></script>
	<script src="assets/js/bootstrap.min.js"></script>
	<script type="text/javascript">
		$(function() {
			$("select[name='location1']").change(function() {
				$("select[name='location2']").empty();
				
				var sido = $(this).find("option:selected").val();
				
				$.ajax({
					url: "ajax/sido.jsp",
					data: "sido=" + sido,
					dataType: "xml",
					timeout: 30000,
					cache: false,
					success: function(req) {
						$(req).find("item").each(function() {
							var idCommon = $(this).find("idCommon").text();
							var commonText = $(this).find("commonText").text();
							
							var option = $("<option>").html(commonText);
							option.attr({'value' : idCommon});
							
							$("select[name='location2']").append(option);
						});
					},
					error: function(xhr, status, error) {
						alert("status: " + status + " / error-code: " + xhr.status + " " + error);
					}
				});
			});
		});
	</script>
	<!-- 형식검사 클래스 참조 -->
	<script src="assets/js/string.js"></script>
	<script type="text/javascript">
		$(function() {
			$("#searchRegister").submit(function() {
				if ($("input[name='eMail']").val().isValue()) {
					if (!$("input[name='eMail']").val().isEmail()) {
						alert("이메일주소 형식으로만 입력이 가능합니다.");
						$("input[name='eMail']").focus();
						return false;
					}
				}
			});
			
			
			$("#searchdiv").hide();
			
			$("#opensearch").click(function() {
				$("#searchdiv").toggle();
				return false;
			});
			
			$(".unActivity").click(function() {
				if (!confirm("정말 탈퇴처리 하시겠습니까?")) {
					return false;
				}
			});
			
			$(".Activity").click(function() {
				if (!confirm("정말 승인처리 하시겠습니까?")) {
					return false;
				}
			});
		});
	</script>
  </body>
</html>